<template>
	<div>
		<!-- 对象 -->
		<h4>{{ user.name }}今年{{ user.age }}岁了</h4>
		<!-- 数组 -->
		<ul>
			<li :key="index" v-for="(item, index) in list">
				{{ item.id }}:{{ item.title }}
			</li>
		</ul>
		<!-- 触发 -->
		<button @click="list[0].id++">修改东风破的id</button>
		<button @click="user.age++">涨一岁</button>
	</div>
</template>

<script>
export default {
	watch: {
		// 监听数组的变化
		list: {
			deep: true,
			handler(newList) {
				console.log(newList)
			},
		},

		// 我只对对象里的某一个属性监听
		'user.age'(value) {
			if (value === 36) {
				// alert('老谢要退休了')
			}
		},
		// 对整个对象监听，当对象里的任意属性发送改变就触发
		user(value) {
			// 当watch遇到对象和数组类型的数据，会产生一个深度监听的问题
			// watch监听是浅度的，对数组对象需要开启深度监听
			console.log(value)
		},
		// 开启深度监听的写法
		user: {
			// deep: true 开启深度监听
			// handler: 监听函数
			handler(obj) {
				console.log(obj.age)
			},
			deep: true,
		},
	},
	data() {
		return {
			// 对象
			user: {
				name: '老谢',
				age: '35',
			},
			// 数组
			list: [
				{ id: 1, title: '东风破' },
				{ id: 2, title: '青花瓷' },
			],
		}
	},
}
</script>